import { Image, Space, Spin } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import qzyApi from '@/apis/qzyApi'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useBack, useDialog } from '@/hooks'
import { isValueEmpty } from '@/utils'

export default defineComponent({
  name: 'QzyUserPhoto',
  setup() {
    const loading = ref(false)
    const testData = ref([] as any)
    const titlename = ref('')
    const route = useRoute()
    const { handleCancel } = useBack('refreshQzylotteryList')
    function cancel() {
      handleCancel()
    }
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        proxyConfig: {
          form: true,
          props: {
            result: 'records',
            total: 'total'
          },
          ajax: {
            query: async ({ page, form }) => {
              loading.value = true
              const data = await qzyApi.getQzySourceMaterialList({
                id: route.query.id,
                pageSize: page.pageSize,
                pageNo: page.currentPage
              })
              loading.value = false
              return data
            }
          }
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '用户昵称',
            field: 'nickname',
            width: '100'
          },
          {
            title: '上传时间',
            field: 'recordDate',
            width: '200'
          },
          {
            title: '素材/照片',
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })
    function show(item) {
      if (item == ',' || item == ',,' || item == null) {
        return true
      } else {
        return false
      }
    }
    return {
      titlename,
      testData,
      tableRef,
      tableConfig,
      show,
      loading,
      cancel
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <ProTable
          ref="tableRef"
          v-slots={{
            operation: ({ row }) => (
              <div>
                <div v-show={row.images}>
                  {row.images?.split(',').map(item => {
                    return isValueEmpty(item) ? (
                      ''
                    ) : (
                      <div style={{ display: 'inline' }}>
                        <Image
                          style={{ height: '70px', width: '70px' }}
                          src={item}
                        ></Image>
                        <span style={{ marginLeft: '20px' }}></span>
                        <Space size={'large'}></Space>
                      </div>
                    )
                  })}
                </div>
                <span v-show={this.show(row.images)}>暂无图片上传</span>
              </div>
            )
          }}
          {...this.tableConfig}
        />
      </Spin>
    )
  }
})
